<template>
  <div class="singer-row">
    <h4>艺人百科</h4>
    <div class="flex" v-if="singerData.artist">
        <div class="reverse-column">
            <p class="sub-title">华语排行榜</p>
            <span class="weight-font">{{singerData.artist.rank.rank}}</span>
        </div>
        <div class="reverse-column">
            <p class="sub-title">云圈阅读量 </p>
            <span class="weight-font">0</span>
        </div>
    </div>
    <div class="font-normal" v-if="singerData.artist">
        <ul >
            <li>艺人名： {{singerData.artist.name}}</li>
            <li v-if="singerData.user">性别： {{singerData.user.gender === 1? '男' : '女'}}</li>
            <li v-if="singerData.user && singerData.user.birthday">生日： {{dformatBirthday(singerData.user.birthday)}}</li>
        </ul>
        <div>歌手描述： 
            <p v-html="singerData.artist.briefDesc"></p>
        </div>
    </div>
  </div>
</template>

<script>
import {dformatTimetemp} from '@/utils/utils';

export default {
    props: ['data'],
    computed: {
        singerData(){
            return this.data;
        }
    },
    mounted(){
        console.log('singer' , this.singerData)
    },
    methods: {
        dformatBirthday(timetemp){
            return dformatTimetemp(timetemp)
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';
    .singer-row {
        margin: px2rem(10);
        padding: px2rem(10);
        background-color: #fff;
        border-radius: px2rem(8);
        .flex {
            display: flex;

            .reverse-column {
                flex: 1;
                display: flex;
                flex-direction: column-reverse;
                .weight-font {
                    font-size: px2rem(20);
                    text-align: center;
                }

                .sub-title {
                    text-align: center;
                    @include defaultFontSize;
                    color: #bbb;
                }
            }
        }

        .font-normal {
            color: #a0a0a0;
            * {
                @include defaultFontSize;
                line-height: 2;
            }

            p {
                text-indent: 2em;
            }
        }
    }

    
</style>